<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用说明</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/global.js" type="text/javascript" charset="utf-8"></script>
<style>
* {
	box-sizing: border-box;
}

header ul li a {
	font-size: 16px !important;
}

.container {
	padding: 20px;
	/* border: 1px solid red; */
}

.container .timeline h3 {
	color: gray;
	line-height: 1.5em;
}
</style>
</head>
<body>
	<!-- 头部区域 -->
	<header>
		<ul class="layui-nav" style="text-align: center;">
			<li class="layui-nav-item"><a href="index.html"><i
					class="layui-icon layui-icon-release"></i> &nbsp;航班分配</a></li>
			<li class="layui-nav-item layui-this"><a
				href="instructions.html"><i class="layui-icon layui-icon-tabs"></i>
					&nbsp;使用说明</a></li>
		</ul>
	</header>
	<main>
	<div class="layui-container container">
		<ul class="layui-timeline timeline">
			<li class="layui-timeline-item"><i
				class="layui-icon layui-timeline-axis">&#xe63f;</i>
				<div class="layui-timeline-content layui-text">
					<h2 class="layui-timeline-title">左边机舱座位布局</h2>
					<h3>
						该布局内容: 该布局展示出目前机舱内的实时情况, 管理员可以将鼠标放入已占座位上查看乘客信息 <br /> 该布局用法:
						实时观看, 鼠标移入查看基本信息. <br /> 该布局功能: 接受后台后配后的处理数据, 并解析, 在布局中清晰看到分配过程 <i
							class="layui-icon"></i> <br />
					</h3>

				</div></li>
			<li class="layui-timeline-item"><i
				class="layui-icon layui-timeline-axis">&#xe63f;</i>
				<div class="layui-timeline-content layui-text">
					<h2 class="layui-timeline-title">右上角用户数据表格</h2>
					<h3>
						该表格内容: 该表格存放了, 模拟的204条乘客信息, 包含乘客id,名字,偏好等数据 <br /> 该表格用法:
						在表格内勾选待分配的乘客. <br /> 该表格功能: 选中用户后, 这些乘客将会加入预分配空间. <br />
					</h3>
				</div></li>
			<li class="layui-timeline-item"><i
				class="layui-icon layui-timeline-axis">&#xe63f;</i>
				<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">
						<button class="layui-btn">为选中的用户分配座位</button>
					</h3>
					<h3>
						该按钮用法: 先在上方表格内勾选要分配的乘客, 然后单击(单次团购选座不低于1人不超过8人). <br /> 该按钮功能:
						将选中的用户的数据生成报文形式, 提交至后台算法并返回处理结果. <br />
					</h3>
				</div></li>
			<li class="layui-timeline-item"><i
				class="layui-icon layui-timeline-axis">&#xe63f;</i>
				<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">
						<button class="layui-btn">整机分配</button>
					</h3>
					<h3>
						该按钮用法: 直接点击 <br /> 该按钮功能: 在保证机舱内有1个或多个乘客的前提下, 为乘客重新安排更合理的座位布局 <br />
					</h3>
				</div></li>
			<li class="layui-timeline-item"><i
				class="layui-icon layui-timeline-axis">&#xe63f;</i>
				<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">
						<button class="layui-btn">初始化座位</button>
					</h3>
					<h3>
						该按钮用法: 直接点击 <br /> 该按钮功能: 清空所有的座位 <br />
					</h3>
				</div></li>
			<li class="layui-timeline-item"><i
				class="layui-icon layui-timeline-axis">&#xe63f;</i>
				<div class="layui-timeline-content layui-text">
					<h2 class="layui-timeline-title">算法数据及透视模块</h2>
					<h3>
						该模块功能: 展示出算法在后台产生的分配信息和分配过程产生的数据, 提高算法可视化. <br>
					</h3>
				</div></li>
			<li class="layui-timeline-item"><i
				class="layui-icon layui-timeline-axis">&#xe63f;</i>
				<div class="layui-timeline-content layui-text">
					<h2 class="layui-timeline-title">算法约束模块</h2>
					<h3>
						该模块功能: 可以在此模块设置算法的基本约束. <br> 可以设置单人多人分配的权重, 假如多人共享仅有的资源,
						算法会优先考虑权重高的一方.
					</h3>
				</div></li>
			<li class="layui-timeline-item"><i
				class="layui-icon layui-timeline-axis">&#xe63f;</i>
				<div class="layui-timeline-content layui-text">
					<h6 class="layui-timeline-title">更多详见文档...</h6>
				</div></li>
		</ul>
	</div>
	</main>
</body>
</html>
